<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div>
    <button>上一页</button>
    <button>下一页</button>
    <button>尾页</button>
</div>


<canvas id="a_canvas" width="1000" height="700"></canvas>
<script src="common/script/jQuery/jquery-1.11.3.js"></script>
    <script>
        $(function(){

            $.ajax({
                url:"http://47.75.162.103:666/income/ajaxChartsList",
                type:'post',
                data:'',
                dataType:'json',
                success:function(income){
                    console.log("-----------------");
                    createCharts(income.douList);
                },
                error:function(xhr,textStatus,errorThrown){
                }
            });
        });


        function createCharts(data) {

                console.log(data);

                // 获取上下文

                var a_canvas = document.getElementById('a_canvas');

                var context = a_canvas.getContext("2d");

                // 绘制背景

                var gradient = context.createLinearGradient(0,0,0,30);

               // gradient.addColorStop(0,"#e0e0e0");

                //gradient.addColorStop(1,"#ffffff");





                context.fillStyle = gradient;



                context.fillRect(0,0,a_canvas.width,a_canvas.height);





                // 描绘边框

                var grid_cols = data.length + 1;

                var grid_rows = 5;

                var cell_height = a_canvas.height / grid_rows;

                var cell_width = a_canvas.width / grid_cols;

                context.lineWidth = 1;

                context.strokeStyle = "#a0a0a0";



                // 结束边框描绘

                context.beginPath();

                // 准备画横线

                /*for (var col = 0; col <= grid_cols; col++) {

                   var x = col * cell_width;

                   context.moveTo(x,0);

                   context.lineTo(x,a_canvas.height);

                 }

                 // 准备画竖线

                 for(var row = 0; row <= grid_rows; row++){

                   var y = row * cell_height;

                   context.moveTo(0,y);

                   context.lineTo(a_canvas.width, y);

                 }*/

                //划横线

                context.moveTo(0,a_canvas.height/2);

                context.lineTo(a_canvas.width,a_canvas.height/2);



                //画竖线

                context.moveTo(0,0);

                context.lineTo(0,a_canvas.height);





                context.lineWidth = 1;

                context.strokeStyle = "#c0c0c0";

                context.stroke();



                var max_v =0;



                for(var i = 0; i<data.length; i++){

                    var d=0;

                    if(data[i]<0)

                    {dd=d-data[i];

                    }

                    else{d=data[i];};

                    if (d > max_v) { max_v =d};

                }

                max_vmax_v = max_v * 1.1;

                // 将数据换算为坐标

                var points = [];

                for( var i=0; i < data.length; i++){

                    var v= data[i];

                    var px = cell_width *　(i +1);

                    var py = a_canvas.height/2 - a_canvas.height*(v / max_v)/2;

                    points.push({"x":px,"y":py});

                }

                // 绘制折现

                context.beginPath();

                context.moveTo(points[0].x, points[0].y);

                for(var i= 1; i< points.length; i++){

                    context.lineTo(points[i].x,points[i].y);

                }





                context.lineWidth = 2;

                context.strokeStyle = "#8BA9FF";

                context.stroke();



                //绘制坐标图形

                for(var i in points){

                    var p = points[i];

                    context.beginPath();

                    context.arc(p.x,p.y,4,0,2*Math.PI);

                    //实心圆

                    /*

                     context.fillStyle = "#000";*/

                    //空心圆

                    context.strokeStyle = "#000";

                    context.stroke();

                    context.fillStyle="white";

                    context.fill();

                }

                //添加文字

                for(var i in points)

                {  var p = points[i];

                    context.beginPath();

                    context.fillStyle="black";

                    context.fillText(data[i], p.x + 1, p.y - 15);



                }
        }

        function xyy() {

        }
        function syy() {

        }
        function wy() {

        }
        </script>
</body>
</html>